import * as React from 'react';
import s from './index.module.scss'
import { useLocation } from 'react-router-dom'
import {connect} from 'react-redux'
import * as actions from '../../store/action'
import {storeData} from '../../../../store/interface'
import {mainDataProps,initDataProps} from '../../store/interface'


interface designProps{
    mainData:mainDataProps;
    initData:initDataProps;
    getMainDataDispatch:Function;
    getInitDataDispatch:Function;
}

function Design(props:designProps) {
    //console.log(props);
   
    let {mainData,initData ,getMainDataDispatch,getInitDataDispatch} = props
    let [color,setColor] = React.useState('black')
    let [config,setConfig] = React.useState('low')
    let [tyre,setTyre] = React.useState('tyre1')
    let [interior,setInterior] = React.useState('c1')
    React.useEffect(()=>{
        if(!initData.time){
            getInitDataDispatch()
        }
        getMainDataDispatch(config,color,tyre,interior)
    },[color,config,tyre,interior])
    const {color:colorList =[] ,Interior:interiorList=[]}=initData 
    const {imgTyre:tyreList=[]} = mainData
    const { state } = useLocation()
    //console.log(state);
    
    const { title, descriptions } = state as { title: string, descriptions: Array<{num:string,wenzi:string,subscribe:string}> }
    return (
        <div className={s.page}>
            <div className={s.header}>
                <svg className={s.itemIcon} aria-hidden="true">
                    <use xlinkHref={'#icon-Tesla'}></use>
                </svg>
            </div>
            <div className={s.scolle}>
                <img src={mainData.imgCar? mainData.imgCar.car: ""} alt="" />
                <div className={s.title}>
                    {title}
                </div>
                <div className={s.time}>
                    {initData.time}
                </div>
                <div className={s.descriptions}>
                    {descriptions.map(item => {
                        return (
                            <div className={s.discription} key={Math.random()}>
                                <div className={s.text}>
                                    <span className={s.num}>{item.num}</span>
                                    <span className={s.wenzi}>{item.wenzi}</span>
                                </div>
                                <div className={s.subscribe}>{item.subscribe}</div>
                            </div>
                        )
                    })}
                </div>
                <div className={s.btn} >
                    <div className={s.text}>
                        后轮驱动
                    </div>
                    <div className={config=='low'?  s.active : s.anNui} onClick={()=>{setConfig('low');setTyre('tyre1')}} >
                        <div className={s.name}>{title}</div>
                        <div className={s.price}>￥279,900</div>
                    </div>
                </div>
                <div className={s.btn}>
                    <div className={s.text}>
                        双电机全轮驱动
                    </div>
                    <div className={config=='high'?  s.active : s.anNui} onClick={()=>{setConfig('high');setTyre('tyre3')}}>
                        <div className={s.name}>{title + ' 高性能版'}</div>
                        <div className={s.price}>￥367,900</div>
                    </div>
                </div>
                <div className={s.details}>
                    查看详情
                </div>
                <img src={mainData.imgCar? mainData.imgCar.car : ""} alt="" />
                <div className={s.color}>
                    <div className={s.text}>选择颜色</div>
                    <div className={s.icon}>
                        {
                            colorList.map((item:{src:string,name:string},index:number)=>{
                                return <img src={item.src} alt="" onClick={()=>{setColor(item.name)}} className={color==item.name? s.active : ''} key={index}/>
                            })
                           
                        }
                    </div>
                    <div className={s.des}>
                        <div className={s.name}>{mainData.text1}</div>
                        <div className={s.price}>{mainData.text2}</div>
                    </div>
                </div>
                <img src={mainData.imgCar? mainData.imgCar.Tcar:""} alt="" />
                <div className={s.tyre}>
                    <div className={s.text}>
                        选择轮胎
                    </div>
                    <div className={s.icon}>
                        {
                            tyreList.map((item:{name:string,src:string},i:number)=>{
                                return(
                                <img src={item.src} alt="" key={i} onClick={()=>{setTyre(item.name)}} className={tyre==item.name? s.active:''}/>) 
                            })
                        }
                        
                    </div>
                    <div className={s.des}>
                        <div className={s.name}>{mainData.imgCar ? mainData.imgCar.text1:''}</div>
                        <div className={s.price}>{mainData.imgCar? mainData.imgCar.text2:''}</div>
                    </div>
                </div>
                <img src={mainData.interior? mainData.interior.img : ''} alt="" />
                <div className={s.interior}>
                    <div className={s.text}>
                        选择内饰
                    </div>
                    <div className={s.icon}>
                        {interiorList.map((item:{name:string,src:string},index:number)=>{
                            return(
                                <img src={item.src} alt="" key={index} onClick={()=>{setInterior(item.name)}} className={interior==item.name? s.active:''} />
                            )
                        })}
                    </div>
                    <div className={s.des}>
                        <div className={s.name}>{mainData.interior? mainData.interior.text1 : ''}</div>
                        <div className={s.price}>{ mainData.interior? mainData.interior.text2:''}</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state:storeData) => {
    return {
        mainData: state.home.maindata,
        initData: state.home.initdata
    }
}
const mapStateToDisPatch = (dispatch:Function) => {
    return {
        getMainDataDispatch(config:string,color:string,tyre:string,interior:string) {
            dispatch(actions.getMainData(config,color,tyre,interior))
        },
        getInitDataDispatch(){
            dispatch(actions.getInitData())
        }
    }
}

export default connect(mapStateToProps,mapStateToDisPatch)((Design))